<template>
	<view class="accessories">
		<block v-if="!boxHide">
			<view class="bar_top">
				<view class="search">
					<view class="search_input">
						<image src="/static/images/search.png" mode=""></image>
						<input type="text" v-model="search" placeholder="请输入关键词"/>
						<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
					</view>
					<view class="search_btn" @tap="getData(1)">搜索</view>
				</view>

				<view class="finance_bar">
					<view>开始时间：</view>
					<view class="finance_bar_picker"> 
						<view><Time :fields="'minute'" :showTime="false" :lang="false" :time="start" @getDate="getStart"></Time> </view>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</view>

				<view class="finance_bar">
					<view >结束时间：</view>
					<view class="finance_bar_picker">
						<view><Time :fields="'minute'"  :lang="false" :time="end" @getDate="getEnd"></Time> </view>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</view>

				<view class="bar_list">
					<view :class="barNum == 0 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(0)">
						<text>待核销</text>
					</view>
					<view :class="barNum == 1 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(1)">
						<text>已核销</text>
					</view>
				</view> 
 
			</view>
			
			<view class="accessories_list">
				<block v-for="(item,index) in list">
					<view class="accessories_item" @tap="info(item)" :key="index">
						<view class="accessories_item_content">
							<view class="accessories_item_name">{{item.title}}</view>
							<view class="accessories_item_num">
								<text>数量：{{item.stock}}</text><text>编号：{{item.number}}</text>
							</view>
							<view class="accessories_item_time">{{item.create_at}}</view>
						</view>
						<view class="accessories_item_laber" v-if="item.status == 0">待核销</view>
						<image src="/static/images/order_type2.png" v-if="item.status == 1"></image>
					</view>
				</block>
			</view>
			
			<view class="bottom_btn">
				<view class="bottom_btn_list">
					<view @tap="go('library')" v-if="checkPermission([50003])">我的配件仓库</view>
					<view @tap="go('get')" v-if="checkPermission([50002])">领取配件</view>
				</view>
			</view>
		</block>
		
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				search:"",
				boxHide:false,
				barNum:0,
				list:[],
				loading:true,
				page:1,
				start: "",
				end: "",
			}
		},
		onLoad() {
		},
		onShow() {
			if(this.$app.globalData.upData.accessories){
				this.getData(1);
			}
		},
		onReachBottom() {
			if(this.loading){
				this.getData(3);
			}
		},
		onUnload() {
			this.$app.globalData.upData.accessories = true
		},
		methods:{
			getStart(e) {
				 //this.start = e.detail.value;
				 if(e){
					this.start = e.date;
					this.getData(1);
				 }
			},
			getEnd(e) {
				 //this.end = e.detail.value;
				this.end = e.date;
				if (this.start.length > 0) {
					this.getData(1);
				}
			},
			getData(type){
				this.$refs.load.initLoading({loadType:type}).then(res =>{
					this.boxHide = false;
					if(type == 1 || type == 2){this.list = [];this.page = 1;this.loading = true;this.$app.globalData.upData.accessories = false}
					
					let upJson = {page:this.page,status:this.barNum,user_id:this.$store.getters.userInfo.id};

					if(this.search.length>0){
						upJson.search = this.search;
					}
					if(this.start.length>0){
						upJson.start = this.start;
						upJson.end = this.end
					}

					this.$api.getAccessoriesList(upJson).then(res => {
						this.$refs.load.getLoadingData({oldData:this.list,newData:res.data}).then(res => {
							this.list = res.list;
							this.loading = res.loading;
							this.page ++;
						});
					})
				})
			},
			bar(index){//导航
				if(this.barNum != index){
					this.barNum = index;
					this.getData(1);
				}
			},
			go(obj,id){//页面跳转
				uni.navigateTo({
					url:"/pages/accessories/" + obj + "/" + obj + "?id=" + id
				})
			},
			info(item){//查看详情
				if(item.status == 0){
					uni.navigateTo({
						url:"/pages/accessories/pay/pay?id=" + item.id
					})
				}else{
					uni.navigateTo({
						url:"/pages/accessories/info/info?id=" + item.id
					})
				}
				
			}
		}
	}
</script>

<style>
	.accessories{padding-bottom: 120upx;}
	.accessories_list{width: 100%;margin-top: 370upx;}
	.accessories_item{width: 690upx;margin: 30upx 0 0 30upx;padding: 30upx;box-sizing: border-box;background: #FFFFFF;font-size: 30upx;color: #333333;display: flex;flex-direction: row;align-items: center;}
	.accessories_item_content{flex-grow: 1;}
	.accessories_item_num{margin-top: 10upx;font-size: 24upx;color: #666666;}
	.accessories_item_num text:nth-child(2){margin-left: 20upx;}
	.accessories_item_time{font-size: 24upx;color: #999999;margin-top: 10upx;}
	.accessories_item_laber{font-size: 28upx;color: #049BFF;}
	.accessories_item image{width: 100upx;height: 100upx;}
	.finance_bar {
		width: 100%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #9BA7B7;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.finance_bar_picker {
		margin-right: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.finance_bar_picker image {
		width: 22upx;
		height: 10upx;
		margin-left: 10upx;
	}

	.finance_bar_btn {
		margin-left: auto;
		color: #333333;
	}
</style>
